<template>
  <div class="MemberCharge">
    <h3>会员充值</h3>
    <div class="cont mt_40">
      <div class="item" v-for="item in Packages" :key="item.id">
        <div class="title">
          <span class="mr_10">{{item.name}}</span>
          <span>{{item.price || 'xx'}}元/月</span>
          <span>原价：{{item.suggested_price || 'xx'}}元/月</span>
          <span>是否推荐：{{item.is_recommended}}</span>
          <span>天数：{{item.days}}天</span>
        </div>
        <div class="text mt_20">
          <p>1.会员权益-指数曲线</p>
          <p>2.会员权益-全A股市场股票行情</p>
          <p>3.会员权益-全港市指数股票行情</p>
          <p>4.会员权益-全美股的行情</p>
        </div>
      </div>
    </div>
    <el-button class="sub mt_30 w_20b" type="primary">立即开通</el-button>
  </div>
</template>

<script setup>
import {vipApi} from '@/servers'
import { onMounted,reactive, ref } from 'vue-demi'

const Packages = ref([])

onMounted(()=>{
  getPackages()
})
// 获取会员包
function getPackages(){
  vipApi.packages().then(data=>{
    Packages.value = data
  })
}

// info
</script>

<style lang="scss" scoped>
.MemberCharge {
  width: 100%;
  overflow: auto;
  margin-top: 60px;
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  > .cont {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    > .item {
      padding: 40px;
      > .title {
        background-color: #caf982;
        color: #d9001b;
        padding: 10px;
        border-radius: 5px;
        text-align: center;
      }
      > .text p{
        margin-bottom: 10px;
        &:last-child{
          margin-bottom: 0;
        }
      }
    }
  }
  .sub{
    min-width: 200px;
  }
}
</style>